<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>etp - 内网穿透</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <style>
        .layui-body {
            overflow: hidden;
            margin: 15px;
        }

        #mainFrame {
            width: 100%;
            height: 100%;
            border: none;
        }

        html {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">
    <!-- 顶部 -->
    <div class="layui-header">
        <div class="layui-logo layui-bg-black">
            <img src="#" alt=""> etp
        </div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a>
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"> admin
                </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a id="openAccountSetting">
                            <i class="layui-icon layui-icon-set"></i> 账户设置
                        </a>
                    </dd>
                    <dd>
                        <a id="logout">
                            <i class="layui-icon layui-icon-logout"></i> 退出登录
                        </a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>

    <!-- 左侧菜单 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="leftMenu">
                <li class="layui-nav-item layui-this">
                    <a data-url="/monitor.html"><i class="layui-icon layui-icon-console"></i>
                        监控</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="/mapping.html"><i class="layui-icon layui-icon-link"></i> 映射</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="/client.html"><i class="layui-icon layui-icon-app"></i> 客户端</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="/stats.html"><i class="layui-icon layui-icon-chart"></i> 统计</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 主体内容（使用 iframe） -->
    <div class="layui-body">
        <iframe id="mainFrame" src="/monitor.html" frameborder="0"></iframe>
    </div>
</div>

<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['element', 'layer'], function () {
        const $ = layui.$;
        // 默认选中第一个
        const $menuItems = $('.layui-nav-tree .layui-nav-item a');
        // 点击左侧菜单切换页面
        $menuItems.on('click', function () {
            const url = $(this).data('url');
            if (url && url !== '') {
                $('#mainFrame').attr('src', url);
                // 高亮当前菜单
                $menuItems.parent().removeClass('layui-this');
                $(this).parent().addClass('layui-this');
            }
        });
        $('#openAccountSetting').on('click', function () {
            $('#mainFrame').attr('src', '/account.html');
        });
    });
</script>
</body>
</html>
